<template>
	<view class="container">
		<view class="tabs">
			<view :class="['tab', { active: currentTab === 'unused' }]" @click="changeTab('unused')">
				未使用
			</view>
			<view :class="['tab', { active: currentTab === 'used' }]" @click="changeTab('used')">
				已使用
			</view>
			<view :class="['tab', { active: currentTab === 'expired' }]" @click="changeTab('expired')">
				已过期
			</view>
		</view>

		<view class="content">
			<view v-if="currentTab === 'unused'">
				<view class="card">
					<view class="left">
						<view class="amount-area">
							<text class="price">￥10</text>
							<text class="condition">满200元可用</text>
						</view>
					</view>
					<view class="right">
						<text class="description">适用/仅限于XX加油站使用</text>
						<view class="date-area">
							<text class="date">2020.04.11至2020.05.11</text>
							<button class="button">立即使用</button>
						</view>
					</view>
				</view>
				<view class="card">
					<view class="left">
						<view class="amount-area">
							<text class="price">9折</text>
						</view>
					</view>
					<view class="right">
						<text class="description">适用/仅限于XX加油站使用</text>
						<view class="date-area">
							<text class="date">2020.04.11至2020.05.11</text>
							<button class="button">立即使用</button>
						</view>
					</view>
				</view>
			</view>
			<view v-if="currentTab === 'used'" class="placeholder">
				<view class="card" >
					<view class="left1" >
						<view class="amount-area">
							<text class="price">￥10</text>
							<text class="condition">满200元可用</text>
						</view>
					</view>
					<view class="right">
						<text class="description">适用/仅限于XX加油站使用</text>
						<view class="date-area">
							<text class="date1">2020.04.11至2020.05.11</text>
							<button class="button1">已使用</button>
						</view>
					</view>
				</view>
				<view class="card">
					<view class="left1">
						<view class="amount-area">
							<text class="price">9折</text>
						</view>
					</view>
					<view class="right">
						<text class="description">适用/仅限于XX加油站使用</text>
						<view class="date-area">
							<text class="date1">2020.04.11至2020.05.11</text>
							<button class="button1">已使用</button>
						</view>
					</view>
				</view>
			</view>
			<view v-if="currentTab === 'expired'" class="placeholder">
				<view class="card" >
					<view class="left1" >
						<view class="amount-area">
							<text class="price">￥10</text>
							<text class="condition">满200元可用</text>
						</view>
					</view>
					<view class="right">
						<text class="description">适用/仅限于XX加油站使用</text>
						<view class="date-area">
							<text class="date1">2020.04.11至2020.05.11</text>
							<button class="button1">已过期</button>
						</view>
					</view>
				</view>
				<view class="card">
					<view class="left1">
						<view class="amount-area">
							<text class="price">9折</text>
						</view>
					</view>
					<view class="right">
						<text class="description">适用/仅限于XX加油站使用</text>
						<view class="date-area">
							<text class="date1">2020.04.11至2020.05.11</text>
							<button class="button1">已过期</button>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				currentTab: 'unused', // 默认选中的标签
			};
		},
		methods: {
			changeTab(tab) {
				this.currentTab = tab; // 切换标签
			}
		}
	}
</script>

<style>
	.container {
		padding: 15px;
		background-color: #ffffff;
	}

	.tabs {
		display: flex;
		justify-content: space-between;
		/* border-bottom: 2px solid #007AFF; */
	}

	.tab {
		flex: 1;
		text-align: center;
		padding: 10px;
		color: #333;
		cursor: pointer;
		font-size: 16px;
	}

	.tab.active {
		color: #007AFF;
		font-weight: bold;
	}

	.content {
		margin-top: 10px;
		background-color: #F8F8F8;
	}

	.card {
		display: flex;
		background-color: #fff;
		border-radius: 10px;
		overflow: hidden;
		margin-bottom: 20px;
	}

	.left {
		background-color: #3A79FF;
		color: #ffffff;
		padding: 10px;
		text-align: center;
		width: 130rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

.left1 {
		background-color: #BEBEBE;
		color: #ffffff;
		padding: 10px;
		text-align: center;
		width: 130rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}
	.amount-area {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.price {
		font-size: 24px;
		font-weight: bold;
	}

	.condition {
		font-size: 11px;
		margin-top: 5px;
	}

	.right {
		flex: 1;
		padding: 15px;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		background-color: #F8F8F8;
	}

	.description {
		font-size: 16px;
		color: #666;
		margin-bottom: 5px;
	}

	.date-area {
		display: flex;
		align-items: center;
	}
	
	.date {
		font-size: 14px;
		color: #f00;
		margin-right: 10px;
	}

	.date1 {
		font-size: 14px;
		color: #999AA5;
		margin-right: 10px;
	}

	.button {
		background-color: #007AFF;
		color: #ffffff;
		padding: 5px 10px;
		border: none;
		border-radius: 5px;
		cursor: pointer;
		text-align: center;
		font-size: 12px;
		transition: background-color 0.2s;
		margin-right: -10px;
	}
	.button1 {
		background-color: #BEBEBE;
		color: #ffffff;
		padding: 5px 10px;
		border: none;
		border-radius: 5px;
		cursor: pointer;
		text-align: center;
		font-size: 12px;
		transition: background-color 0.2s;
		margin-right: -10px;
	}

	.button:hover {
		background-color: #005bb5;
	}


</style>
